<template>
    <div>
        <!-- 查询 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="查询车位">
                <el-select
                    v-model="formInline.seatchtype"
                    placeholder="查询车位"
                >
                    <el-option label="地址" value="address"></el-option>
                    <el-option label="价格" value="price"></el-option>
                    <el-option label="车位号" value="carNumber"></el-option>
                </el-select>
                <el-form-item label="查询车位">
                    <el-input v-model="formInline.seatchval"></el-input>
                </el-form-item>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getparkings(inlessorsId)"
                    >查询</el-button
                >
            </el-form-item>
        </el-form>
        <!-- 内容表单 -->
        <el-table :data="tableData.parkings" style="width: 100%">
            <el-table-column label="车位ID">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row._id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="车位号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                        scope.row.carNumber
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="车位地址">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                        scope.row.address
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="车位价格">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column label="出租周期">
                <template slot-scope="scope">
                    <span style="margin-left: 10px"
                        >{{ scope.row.cycle }}个月</span
                    >
                </template>
            </el-table-column>
            <el-table-column label="车位状态">
                <template slot-scope="scope">
                    <span
                        style="margin-left: 10px; color: red"
                        v-if="scope.row.state == 1"
                        >未审核</span
                    >
                    <span
                        style="margin-left: 10px; color: orange"
                        v-if="scope.row.state == 2"
                        >未上架</span
                    >
                    <span style="margin-left: 10px;color:brown" v-if="scope.row.state == 3"
                        >审核未通过</span
                    >
                    <span
                        style="margin-left: 10px; color: blue"
                        v-if="scope.row.state == 4"
                        >已上架</span
                    >
                    <span
                        style="margin-left: 10px; color: green"
                        v-if="scope.row.state == 5"
                        >已出租</span
                    >
                </template>
            </el-table-column>
            <el-table-column label="车位图片">
                <template slot-scope="scope">
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="
                            'http://localhost:3000/images/' +
                            (scope.row.imagesName || 'default.jpg')
                        "
                        fit="fill"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="
                            $router.push(
                                '/lessors/updataLessors/' + scope.row._id
                            )
                        "
                        >修改</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row._id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import LessorsNav from "../../components/lessors/LessorsNav.vue";
const jwt = require("jsonwebtoken");
import { createNamespacedHelpers } from "vuex";
import { TOKEN_KEY } from "../../../../node-parking/utils/const";
const { mapState, mapActions } = createNamespacedHelpers("parkings");

export default {
    mounted() {
        const { username } = jwt.verify(localStorage.token, TOKEN_KEY);
        const { _id } = jwt.verify(localStorage.token, TOKEN_KEY);
        this.inlessorsId = _id;
        this.tableData.state = "";
        this.getparkings(_id);
    },
    data() {
        return {
            //查询
            inlessorsId: "",
        };
    },
    components: {
        LessorsNav,
    },
    computed: {
        ...mapState(["formInline", "tableData", "lessorsId"]),
    },
    methods: {
        //数据渲染
        ...mapActions(["getparkings"]),

        //删除
        async handleDelete(index) {
            const { data } = await axios({
                url: "/delete/deletepark",
                method: "get",
                params: { _id: index, isDelete: true },
            });
            if (data.status) {
                alert("数据删除成功");
                this.getparkings(this.inlessorsId);
            }
        },
        //分页
        handleSizeChange(val) {
            this.tableData.pageSize = val;
            this.getparkings(this.inlessorsId);
        },
        handleCurrentChange(val) {
            this.tableData.currentPage = val;
            this.getparkings(this.inlessorsId);
        },
    },
};
</script>
<style lang="scss">
.block {
    text-align: center;
}
.intable {
    width: 100%;
    padding: 20px;
    color: #606266;
    font-size: 15px;
    thead {
        color: #909399;
        font-size: 16px;
    }
    button {
        padding: 7px 15px;
        color: #3a8ee6;
    }
}
</style>